<template>
  <section class="detail_container">
    <HeaderTop></HeaderTop>
    <!-- 顶部导航 -->
    <van-sticky :offset-top="49">
      <article class="float_sticky">
        <div class="sticky_left">
          <van-tabs v-model:active="actives" title-style="height:0.8rem">
            <van-tab title="点餐"></van-tab>
            <van-tab title="评价"></van-tab>
            <van-tab title="商家"></van-tab>
            <van-tab title="千锋"></van-tab>
            <van-tab title="万锋"></van-tab>
            <van-tab title="锋锋"></van-tab>
          </van-tabs>
        </div>
      </article>
    </van-sticky>
    <!-- 侧边导航 -->
    <aside class="aside-nav">
      <van-sticky :offset-top="94">
        <div class="shop-card">
          <ul>
            <img
              :src="shopInfo.imgs.bigImg"
              alt=""
              style="border-radius: 50%; margin-left: 0.7rem"
            />
            <img
              :src="shopInfo.imgs.brandImg"
              alt=""
              style="width: 3rem; height: 0.8rem; margin: 0rem 0.2rem 0.1rem"
            />
            <li>{{ shopInfo.text.shopName }}</li>
            <li>{{ shopInfo.text.score }}</li>
            <li>{{ shopInfo.text.yueshou }}</li>
            <li>{{ shopInfo.text.average }}</li>
            <li>{{ shopInfo.text.start }}</li>
            <li>{{ shopInfo.text.time }}</li>
            <li>{{ shopInfo.text.hot }}</li>
          </ul>
        </div>
      </van-sticky>
    </aside>
    <article class="main-content"></article>
  </section>
</template>

<script>
// 从vuex中拿shopInfo
import { mapState } from 'vuex'
import { ref } from 'vue'
// 引入头部导航自定义组件
import HeaderTop from '@/components/foodContent/headerTop.vue'
import { defineComponent } from 'vue'
export default defineComponent({
  components: {
    HeaderTop
  },
  computed: {
    ...mapState(['shopInfo'])
  },
  setup() {
    const active = ref(1)
    const actives = ref(0)
    return { active, actives }
  }
})
</script>

<style lang="scss" scoped>
.detail_container {
  background-color: antiquewhite;
}
.float_sticky {
  background-color: #ffffff;
  height: 0.5rem;
  padding: 0 0.15rem;
  display: flex;
  .sticky_left {
    display: flex;
    align-items: center;

    span {
      margin-right: 0.2rem;
    }
  }
}
.main-content {
  height: 2rem;
}
.aside-nav {
  .shop-card {
    padding-left: 0.3rem;
    padding-top: 0.3rem;
    img {
      width: 2rem;
    }
    li {
      text-align: center;
      width: 3.5rem;
      border: 0.02rem solid gray;
      border-radius: 0.1rem;
      margin-bottom: 0.05rem;
      padding-left: 0.05rem;
      background-color: pink;
      color: purple;
      font-family: '楷体';
      font-weight: 600;
    }
  }
}
</style>
